<template>
  <div class="contain">
    <!-- 异常类型标题(档案出入库) -->
    <div class="title">{{title}}</div>
    <!-- 信息列表 -->
    <div class="list">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="mt" :auto-fill="false">
         <ul class="details">
          <li>
            <span class="time">时间</span>
            <span class="operator">操作员</span>
            <span class="name">编号</span>
            <span class="state">状态</span>
            <span class="detail">操作</span>
          </li>
          <li v-for="item in tableData" :key="item.Id">
            <span class="time">{{item.Time}}</span>
            <span class="operator">{{item.Operator}}</span>
            <span class="name">{{item.Name}}</span>
            <span class="state" :style="{color: item.State=='正常' ? 'black' : 'red'}">{{item.State}}</span>
            <span class="detail">{{item.Detail}}</span>
          </li>

        </ul>

        <!-- <div class="table">
      <el-table 
      stripe 
      border 
      highlight-current-row 
      empty-text="暂无数据" 
      ref="multipleTable" 
      :data="tableData" 
      tooltip-effect="dark"
       style="width:100%">
      
          <el-table-column sortable prop="Time" label="时间" width="160">
          </el-table-column>
  
          <el-table-column sortable prop="Operator" label="姓名" width="120" filter-placement="bottom-end">
          </el-table-column>
    
          <el-table-column sortable prop="Name" label="编号" width="120">
          </el-table-column>
  
          <el-table-column sortable prop="State" label="状态" width="120">
          </el-table-column>
       
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini">入库</el-button>
            </template>
          </el-table-column>
        </el-table> 
     </div>    -->
       
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
// 引入vue 辅助函数
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      value1: "",
      title: "档案出入库",
      currentPage: 1,
      pageSize: 20,
      allLoaded: false
    };
  },
  mounted() {
    // 修改当前页面异常信息数量为0
    this.clearMesNumber("archives");
  },
  created() {
    var that = this;
    // 请求档案变动详细信息列表数据
    this.myAjax("top");
  },
  methods: {
    // 映射方法为store.commit
    ...mapMutations(["clearMesNumber"]),
    // 请求数据
    myAjax(type) {
      var that = this;
      var url = api + "/api/Warehouse/GetArchives";
      switch (type) {
        case "top":
          that.currentPage = 1;
          break;
        case "bottom":
          that.currentPage += 1;
          break;
      }
      $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        //  xhrFields: {
        //     withCredentials: true
        //  },
        //  crossDomain: true,
        data: {
          p: that.currentPage,
          size: that.pageSize,
          token: JSON.parse(localStorage.getItem("token"))
        },
        success: function(result) {
          console.log("档案出入库：", result);
          if (result.state == -1) {
            alert(result.message);
            that.$router.push("/login");
          } else {
            // 请求成功展示列表
            switch (type) {
              case "top":
              // 隐藏上拉加载的提示内容
                that.$refs.mt.onTopLoaded();
                that.tableData = result;
              // 上拉刷新以后设置异常消息数量为0
                that.clearMesNumber("archives");
                break;

              case "bottom":
              // 隐藏下拉刷新的内容
                that.$refs.mt.onBottomLoaded();
                if (result.length == 0) {
                  // 异常数据为0 禁止下拉刷新
                  this.allLoaded = true;
                } else {
                  that.tableData.push(...result);
                  console.log("table:", that.tableData);
                }
                break;
            }
          }
        },
        error: function(error) {
          // 请求失败提示信息
          alert("系统异常");
        }
      });
    },
    // 上拉刷新请求最新数据
    loadTop(id) {
      console.log("this.pageSize:", this.currentPage);
      this.myAjax("top");
    },
    // 下拉加载更多
    loadBottom() {
      this.myAjax("bottom");
    }
  }
};
</script>
<style lang="scss">
.details {
  height: 100%;
  font-size: 18px;
  white-space: nowrap;
  overflow-x: scroll;
  li {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dashed #ccc;

    span {
      display: inline-block;
    }
    .time {
      width: 150px;
    }
    .operator,
    .detail,
    .name,
    .state {
      width: 60px;
    }
  }
}
</style>

 
